<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script>
        /**
         * 将商品添加到购物车。
         * 
         * @param {string} item - 要添加的商品名称。
         */
        function addToCart(item) {
            // 从 localStorage 中获取名为 'cart' 的项，并尝试将其解析为 JSON 数组。
            // 如果该项不存在或为空，则初始化为一个空数组。
            let cart = JSON.parse(localStorage.getItem('cart')) || [];

            // 将新商品添加到购物车数组中。
            cart.push(item);

            // 将更新后的购物车数组转换回 JSON 字符串，并保存到 localStorage 中。
            localStorage.setItem('cart', JSON.stringify(cart));

            // 弹出提示框，告知用户商品已成功添加到购物车。
            alert(`${item} 已添加到购物车`);
        }

        /**
         * 查看当前购物车的内容。
         */
        function viewCart() {
            // 从 localStorage 中获取名为 'cart' 的项，并尝试将其解析为 JSON 数组。
            // 如果该项不存在或为空，则初始化为一个空数组。
            let cart = JSON.parse(localStorage.getItem('cart')) || [];

            // 使用 Array.prototype.join 方法将购物车中的所有商品以逗号分隔连接成一个字符串，
            // 然后通过 alert 弹窗向用户展示这些商品。
            // 如果购物车为空，则只会显示“购物车内容: ”。
            alert(`购物车内容: ${cart.join(', ')}`);
        }
    </script>
</head>
<body>
    <!-- 添加商品按钮 -->
    <button onclick="addToCart('苹果')">添加苹果</button>
    <button onclick="addToCart('香蕉')">添加香蕉</button>

    <!-- 查看购物车按钮 -->
    <button onclick="viewCart()">查看购物车</button>
</body>
</html>